<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate">
  <title>2 &middot; LiangHaochen</title>
  <meta name="keywords" content="素锦, inspiration, customization, rainmeter, design, web, 壁纸, 设计, 收集, wallpaper, collection, jaku, icon">
  <meta name="description" content="世界上每个角落都有人过着相似的人生">
  <meta name="author" content="hojun">
  <link rel="icon" type="image/png" href="">
  <link rel="stylesheet" href="/css/diaspora.css">
  <link rel="stylesheet" href="/css/insight.css">
  <link rel="stylesheet" href="/css/custom.css">
</head><body class="loading">
        <div id="loading"></div>
				<div id="nav"></div>
				<div class="nav-user"></div>
    <div id="single">
    <div id="top" style="display: block;">
        <div class="bar">
        </div>
        <a class="icon-icon" href="javascript:history.back()">
        </a>
        <div title="播放/暂停" class="icon-play">
        </div>
        
        <h3 class="subtitle" style="display: none;">
        2</h3>
        <div class="social">
            <div>
                <div class="share">
                    <a title="获取二维码" class="icon-wechat" href="javascript:;"></a>
                </div>
                <div id="qr"></div>
            </div>
        </div>
        <div class="scrollbar" style="width: 1.1636%;"></div>
    </div>
    <div class="section">
        <div class="article">
            <div>
                <h1 class="title">
                2</h1>
                <div class="stuff">
                    
                    <span>March 13, 2019</span>
                    <span>字数 1883</span>
                    
                    
                </div>
                <div class="content">
                    <p>Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。对比Hexo，Hugo仅需一个二进制文件（hugo.exe）即可实现网站生成的生成。</p>
<h2 id="什么是hugo">什么是hugo</h2>
<p>而且就如它官网介绍：The world’s fastest framework for building websites。Hugo是目前最快的网站构建框架。凭借其惊人的速度和灵活性，解决了环境依赖、性能较差的问题，还有使用简单、部署方便等诸多优点，通过 LiveReload 实时刷新，极大的优化文章的写作体验。Hugo使建站再次变得有趣。</p>
<h2 id="hugo能做什么">hugo能做什么</h2>
<p>hugo是静态网站生成器，能够作为一些展示类网站的解决方案。比如个人博客、产品介绍、个人作品展示、文档介绍、公司官网等等。再加上Github Pages的功能，就能不花一分钱建一个自己的网站了。</p>
<h2 id="开始使用hugo">开始使用hugo！</h2>
<h3 id="下载安装hugo">下载安装hugo</h3>
<p>我们为了简便快速当然选择hugo的二进制安装方式，源码安装有机会再去学习。
去hugo的官方<a href="https://github.com/gohugoio/hugo/releases">github仓库</a>下载对应的操作系统版本的Hugo二进制文件:
<img src="https://wx4.sinaimg.cn/large/006bYVyvly1g21e25mefyj30pn0gvwgx.jpg" alt="">
博主以windows64位操作系统为例，下载对应的Windows-64bit.zip。
<img src="https://ws3.sinaimg.cn/large/006bYVyvly1g21e7f3btuj30ig06d74g.jpg" alt="">
下载完成后解压缩得到如上文件。</p>
<p>Mac下直接使用Homebrew安装：(其他步骤同理略)</p>
<pre><code class="language-ter" data-lang="ter">brew install hugo
</code></pre><h3 id="hugo环境变量配置">hugo环境变量配置</h3>
<p>上一步操作，可以看到我们把hugo.exe解压到了<code>D:\hugo</code>下面。所以hugo命令只能在该目录下才能识别。但是我们想要把博客目录建到其他目录下，这就需要配置环境变量。
此电脑-&gt;右键-&gt;点击属性：
<img src="https://wx2.sinaimg.cn/large/006bYVyvly1g21eivtvt1j30dg0a374t.jpg" alt="">
再点击高级系统设置：
<img src="https://wx2.sinaimg.cn/large/006bYVyvly1g21ek2dsicj30l409xwf7.jpg" alt="">
点击环境变量
<img src="https://ws4.sinaimg.cn/large/006bYVyvly1g21ekzxmurj30de0gigm7.jpg" alt="">
在系统变量中找到path，再点击编辑
<img src="https://wx2.sinaimg.cn/large/006bYVyvly1g21emshet7j30ha0i33zk.jpg" alt="">
点击新建，填入hugo解压的文件目录，比如博主解压在<code>D:\hugo</code>就填的是<code>D:\hugo</code>
<img src="https://ws3.sinaimg.cn/large/006bYVyvly1g21eo0w30nj30f10fuwfr.jpg" alt="">
注意：win10以下系统界面不一样，比如win7，直接在path最前或最后加入地址就行，注意用英文<code>;</code>分号分割开，不会的小白可以问度娘。
配置好后点击确定，然后打开cmd命令行程序就可以在任意位置使用hugo命令了。</p>
<h3 id="hugo新建博客">hugo新建博客</h3>
<p>win+R键打开运行框，输入cmd打开命令行。
<img src="https://wx2.sinaimg.cn/large/006bYVyvly1g21exsj1k7j30bb06caa6.jpg" alt="">
使用如下命令</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd">hugo new site /path/to/site
</code></pre></div><p>比如<code>hugo new site E:/hugo/hojunBlog</code>就在E盘hugo文件夹下新建了一个叫hojunBlog的hugo站点。
<img src="https://ws4.sinaimg.cn/large/006bYVyvly1g21f1bmco9j30j1081t99.jpg" alt=""></p>
<h3 id="hugo新建页面和文章">hugo新建页面和文章</h3>
<p>新建一个links页面：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd">hugo new links.md
</code></pre></div><p>links.md 自动生成到了 content/links.md，内容如下</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#66d9ef">title</span>: <span style="color:#e6db74">&#34;Links&#34;</span>
<span style="color:#66d9ef">date</span>: <span style="color:#e6db74">2019-04-11T23:35:53</span><span style="color:#ae81ff">+08</span>:<span style="color:#ae81ff">00</span>
<span style="color:#66d9ef">draft</span>: <span style="color:#66d9ef">true</span>
---
</code></pre></div><p>创建第一篇文章，放到 post 目录，方便之后生成聚合页面。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd">hugo new post/myfirst.md
</code></pre></div><p>links.md 自动生成到了 content/post/myfirst.md，内容如下:(注意这里需要把draft删除掉，不然正式生产的时候不会生成文章，因为draft是草稿)</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#66d9ef">title</span>: <span style="color:#e6db74">&#34;Myfirst&#34;</span>
<span style="color:#66d9ef">date</span>: <span style="color:#e6db74">2019-04-13T23:23:34</span><span style="color:#ae81ff">+08</span>:<span style="color:#ae81ff">00</span>
<span style="color:#66d9ef">draft</span>: <span style="color:#66d9ef">true</span>
---
</code></pre></div><h3 id="hugo安装主题">hugo安装主题</h3>
<p>新建文章后不要着急，还需要安装hugo主题才行。去官方主题列表<a href="https://themes.gohugo.io/">themes.gohugo.io</a>里去挑选自己想要的主题。
<img src="https://ws1.sinaimg.cn/large/006bYVyvgy1g21gadn598j30rh0goq7n.jpg" alt="">。
我们这里以icarus主题为例来安装主题。github仓库地址<a href="https://github.com/digitalcraftsman/hugo-icarus-theme">github.com/digitalcraftsman/hugo-icarus-theme</a>
<img src="https://wx3.sinaimg.cn/large/006bYVyvgy1g21gbu80toj315o0p0wyi.jpg" alt=""></p>
<h4 id="根据文档clone主题">根据文档clone主题</h4>
<p>在Hugo站点运行的文件夹中</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd"><span style="color:#66d9ef">cd</span> themes
git clone https://github.com/digitalcraftsman/hugo-icarus-theme.git
</code></pre></div><h4 id="配置主题">配置主题</h4>
<p>找到icarus主题下的<code>hojunBlog\themes\hugo-icarus-theme\exampleSite\config.toml</code>复制其内容到根目录下的<code>hojunBlog\config.toml</code>中，接着修改根目录下的配置文件部分内容如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#a6e22e">baseurl</span> = <span style="color:#e6db74">&#34;https://yourname.github.io&#34;</span>
<span style="color:#a6e22e">languageCode</span> = <span style="color:#e6db74">&#34;en-us&#34;</span>
<span style="color:#a6e22e">title</span> = <span style="color:#e6db74">&#34;Icarus&#34;</span>
<span style="color:#75715e"># Enable comments by entering your Disqus shortname</span>
<span style="color:#a6e22e">disqusShortname</span> = <span style="color:#e6db74">&#34;spf13&#34;</span>
<span style="color:#75715e"># Enable Google Analytics by entering your tracking code</span>
<span style="color:#a6e22e">googleAnalytics</span> = <span style="color:#e6db74">&#34;&#34;</span>
<span style="color:#75715e"># Define the number of posts per page</span>
<span style="color:#a6e22e">paginate</span> = <span style="color:#ae81ff">10</span>
<span style="color:#a6e22e">footnotereturnlinkcontents</span> = <span style="color:#e6db74">&#34;↩&#34;</span>
<span style="color:#a6e22e">theme</span> = <span style="color:#e6db74">&#34;hugo-icarus-theme&#34;</span>
<span style="color:#75715e"># Comment the themesDir option if you use this theme in production</span>
<span style="color:#a6e22e">themesDir</span> = <span style="color:#e6db74">&#34;./themes/&#34;</span>
</code></pre></div><p>其中重要的是<code>baseurl</code>、<code>theme</code>、<code>themesDir</code>的配置，其他的配置可以之后慢慢设置。<code>baseurl</code>需要改成你的github pages的仓库名，<code>theme</code>、<code>themesDir</code>改成主题目录名和主题路径（上图填的是相对路径）。
其他配置可以参考icarus主题的文档，这里就不做介绍了。</p>
<h4 id="使用命令来预览发布主题">使用命令来预览、发布主题</h4>
<p>在根目录（比如这里是hojunBlog下）执行：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd">hugo server
</code></pre></div><p><img src="https://wx4.sinaimg.cn/large/006bYVyvly1g22b79c6vcj30my0dyq3l.jpg" alt="">
然后打开浏览器，输入<code>localhost:1313</code>就可以看到自己的博客了！（注意之前说的文章里的draft: true要删掉哦）
<img src="https://ws2.sinaimg.cn/large/006bYVyvly1g22ba3esz4j30zw0j6myr.jpg" alt=""></p>
<p>接着就是要发布主题到github上了，注册github，新建yourname.github.io的仓库，配置SSH，复制仓库的github pages地址到之前说的配置的baseurl中(就是https://yourname.github.io)，然后使用命令：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-cmd" data-lang="cmd">hugo
</code></pre></div><p>就可以发布到github上，通过https://yourname.github.io访问你的博客了！</p>

                    
                    <audio id="audio" loop="1" preload="auto" style="width: 100%;" controls="controls">
                        <source type="audio/mpeg" src="/mp3/%e8%a1%97%e9%81%93%e7%9a%84%e5%af%82%e5%af%9e.mp3">
                        <a href="/mp3/%e8%a1%97%e9%81%93%e7%9a%84%e5%af%82%e5%af%9e.mp3">/mp3/街道的寂寞.mp3</a>
                    </audio>
                </div>
                <div class="comment-wrap">

                </div>
            </div>
        </div>
    </div>
    <div class="relate">
        <ul>
            <h3 id="prev_next">
                <em>相 关 文 章</em>
                <span>
                    <a href="javascript: window.scrollTo(0, 0);">
                    返回顶部</a>
                    
                        <a href="/blogs/posts/3/" rel="prev">上一篇</a>
                    
                    
                        <a href="/blogs/posts/12/" rel="next">下一篇</a>
                    
                </span>
            </h3>
            
            
            
        </ul>
    </div>
</div>
<p style="text-align: center;">
  <a style="color: inherit" target="_blank" href="https://github.com/honjun/hugo-theme-diaspora"></a>
</p>

<script>
  var siteTitle = "LiangHaochen";
</script>
<script src="/js/jquery.min.js"></script>
<script src="/js/plugin.js"></script>
<script src="/js/diaspora.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/InsightSearch.js"></script>
</body>
</html>

